<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考勤信息表格</title>
    <!-- 引入jQuery -->
    <script src="/static/jquery/jquery.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="/static/bootstrap/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Vue.js -->
    <script src="/static/vue/vue.min.js"></script>
    <!-- 引入 Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .attendance-table {
            margin-top: 20px;
        }
        .attendance-table th,
        .attendance-table td {
            text-align: center;
            vertical-align: middle;
        }
    <style>
        .attendance-table {
            margin-top: 20px;
        }
        .attendance-table th,
        .attendance-table td {
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div id="app" class="container mt-5">
        <!-- 标题 -->
        <h1 class="mb-4">考勤信息表格</h1>

        <!-- 考勤表格 -->
        <table class="table table-bordered table-hover attendance-table">
            <thead>
                <tr>
                    <th>日期</th>
                    <th>早读缺勤</th>
                    <th>课间操缺勤</th>
                    <th>放学缺勤</th>
                    <th>手机未交</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="record in attendanceRecords" :key="record.date">
                    <td>{{ record.date }}</td>
                    <td>{{ record.morningReading.join(', ') || '无' }}</td>
                    <td>{{ record.exercise.join(', ') || '无' }}</td>
                    <td>{{ record.eveningRollCall.join(', ') || '无' }}</td>
                    <td>{{ record.unsubmitphone.join(', ') || '无' }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="/static/config.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                attendanceRecords: []
            },
            created() {
                this.fetchAttendanceData();
            },
            methods: {
                fetchAttendanceData() {
                    axios.get('http://'+config.server_ip+':5000/api/get_attendance')
                        .then(response => {
                            this.attendanceRecords = response.data;
                        })
                        .catch(error => {
                            console.error('Error fetching attendance data:', error);
                        });
                }
            }
        });
    </script>
</body>
</html>